<template>
 <div class="page-box">
 	<div class="page-title">
  </div>
    <div class="page-main">
      <!-- 左1行 -->
    <div class="page-main-small">
      <div class="page-grid">
      <div class="page-grid-title" style="position: relative;">
        <img src="../../../assets/img/realEstate/main/titlen.png" alt="">
        <div class="go" @click="go(1)">
          更多
        </div>
      </div>
      <div class="page-grid-ec" style="position: relative;">
        <div class="time-pic absolute" style="right: 0px;">
            <div class="time-title">
              商品房销售价格指数
            </div>
          <div class="time-com "> {{Datan.times}}
          <img src="../../../assets/img/realEstate/triangle.png" alt="">
          <timeSelect :type="99" timeType="2" @timeValueChange="timeValueChanges" ></timeSelect>
        </div>
        </div>
        <div class="grid-chart" >
          <barLinePublic class="charH"
                  v-if="echarDatan.xAxisData.length > 0"
                  :housingSupplyStatsData="echarDatan"
                  @dialogData="dialogData"
          ></barLinePublic>
        </div>
      </div>
      </div>
    </div>
    <div class="page-main-map" style="position: relative;">
        <div class="mapBox">
      <mapBox
          v-if="realEstateMiddleData.regions[0].length > 0"
          :housingSupplyStatsData="realEstateMiddleData"
          @mapNameChange="mapNameChange"
          style="height: 100%; width: 100%"
      ></mapBox>
      <div class="map-address">辽宁省{{ cityObj.cityName == "" ? "" : "-" + cityObj.cityName }}</div>
    </div>
    </div>
    <!-- 右1行 -->
    <div class="page-main-small">
      <div class="page-grid">
      <div class="page-grid-title" style="position:relative" >
        <img src="../../../assets/img/realEstate/main/title2.png" alt="">
        <div class="go" @click="go(2)">
          更多
        </div>
      </div>
      <div class="page-grid-ec" style="position: relative;">
        <div class="time-pic absolute" style="right: 0px;">
          <div class="time-title">
            商品住宅库存及去化周期
          </div>
        <div class="time-com "> {{Data02.times}}
          <img src="../../../assets/img/realEstate/triangle.png" alt="">
          <timeSelect :type="2" timeType="2" @timeValueChange="timeValueChanges" ></timeSelect>
        </div>
        </div>
        <div class="grid-chart" >
          <barLinePublic class="charH"
                  v-if="echarData02.xAxisData.length > 0"
                  :housingSupplyStatsData="echarData02"
                  @dialogData="dialogData"
          ></barLinePublic>
        </div>
      </div>
      </div>
    </div>
    <!-- 左2行 -->
    <div class="page-main-small">
      <div class="page-grid">
      <div class="page-grid-title" style="position: relative;">
        <img src="../../../assets/img/realEstate/main/title1.png" alt="">
        <div class="go" @click="go(3)">
          更多
        </div>
      </div>
      <div class="page-grid-ec" style="position: relative;">
        <div class="time-pic absolute" style="right: 0px;">
            <div class="time-title">
              商品住宅销售价格指数
            </div>
          <div class="time-com "> {{Data01.times}}
          <img src="../../../assets/img/realEstate/triangle.png" alt="">
          <timeSelect :type="1" timeType="2" @timeValueChange="timeValueChanges" ></timeSelect>
        </div>
        </div>
        <div class="grid-chart" >
          <barLinePublic class="charH"
                  v-if="echarData01.xAxisData.length > 0"
                  :housingSupplyStatsData="echarData01"
                  @dialogData="dialogData"
          ></barLinePublic>
        </div>
      </div>
      </div>
      </div>
    <!-- 右2行 -->
    <div class="page-main-small">
      <div class="page-grid">
      <div class="page-grid-title" style="position:relative;">
        <img src="../../../assets/img/realEstate/main/title4.png" alt="">
        <div class="go" @click="go(4)">
          更多
        </div>
      </div>
      <div class="page-grid-ec" style="position: relative;">
        <div class="time-pic" style="right: 0px;" >
        <div></div>
        <div class="time-com"> {{Data04.times}}
          <img src="../../../assets/img/realEstate/triangle.png" alt="">
          <timeSelect :type="4" timeType="2" @timeValueChange="timeValueChanges"></timeSelect>
        </div>
        </div>
        <div class="grid-chart" >
          <myList 
          v-if="personHouseMiddleListData01.list.length > 0"
          :housingSupplyStatsData="personHouseMiddleListData01" :type="1"
          style="width: 100%; height: 100%"
          ></myList>
        </div>
      </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="page-footer">
      <div class="page-main-small">
      <div class="page-grid">
      <div class="page-grid-title" style="position: relative;">
        <img src="../../../assets/img/realEstate/main/title3.png" alt="">
        <div class="go" @click="go(5)">
          更多
        </div>
      </div>
      <div class="page-grid-ec" style="position: relative;">
        <div class="time-pic absolute" style="right: 0px;">
                <div class="time-title">
                  二手房销售价格指数
                </div>
        <div class="time-com "> {{Data03.times}}
          <img src="../../../assets/img/realEstate/triangle.png" alt="">
          <timeSelect :type="3" timeType="2" @timeValueChange="timeValueChanges" ></timeSelect>
        </div>
        </div>
        <div class="grid-chart" >
          <barLinePublic class="charH"
                  v-if="echarData03.xAxisData.length > 0"
                  :housingSupplyStatsData="echarData03"
                  @dialogData="dialogData"
          ></barLinePublic>
        </div>
      </div>
      </div>
    </div>
      <div class="page-main-small">
      <div class="page-grid">
      <div class="page-grid-title" style="position: relative;">
        <img src="../../../assets/img/realEstate/main/title5.png" alt="">
        <div class="go" @click="go(6)" >
          更多
        </div>
      </div>
      <div class="page-grid-ec" style="position: relative;">
        <div class="time-pic" style="right: 0px;" >
        <div></div>
        <div class="time-com"> 
          <span class="time-five">{{Data05.times}}</span>
          <img src="../../../assets/img/realEstate/triangle.png" alt="">
          <timeSelect :type="5" timeType="3" @timeValueChange="timeValueChanges"></timeSelect>
        </div>
        </div>
        <div class="grid-chart">
          <mainFooter 
            v-if="personHouseMiddleListData02.list.length > 0"
            :housingSupplyStatsData="personHouseMiddleListData02" :type="1"
            style="width: 100%; height: 100%"
          ></mainFooter>
        </div>
      </div>
      </div>
      </div>
      <div class="page-main-small">
          <div class="page-grid">
          <div class="page-grid-title" style="position: relative;">
            <img src="../../../assets/img/realEstate/main/title6.png" alt="">
            <div class="go" @click="go(7)">
              更多
            </div>
          </div>
          <div class="page-grid-ec" style="position: relative;">
            <div class="time-pic" style="right: 0px;" >
            <div></div>
            <div class="time-com time-coms"> {{Data06.times[0]}}至{{Data06.times[1]}}
              <img src="../../../assets/img/realEstate/triangle.png" alt="">
              <timeSelect :type="6" timeType="1" @timeValueChange="timeValueChanges"></timeSelect>
            </div>
            </div>
            <div class="grid-chart">
              <mainFooter 
                v-if="personHouseMiddleListData03.list.length > 0"
                :housingSupplyStatsData="personHouseMiddleListData03" :type="2"
                style="width: 100%; height: 100%"
              ></mainFooter>
            </div>
          </div>
          </div>
      </div>
    </div>
	</div>
  <magnify
    v-if="magnifyEchartData"
    :housingSupplyStatsData="magnifyEchartData"
    @closeDialog="closeDialog"
  ></magnify>
 </div>
</template>

<script setup lang="ts">
import { ref,reactive, onMounted, onBeforeUnmount, computed } from 'vue';
import {useRouter} from 'vue-router'
import { barLineParamsData } from "@/utils/chartsPbulic";
import mapBox from "@/components/realEstate/map.vue";
import barLinePublic from "@/components/realEstate/barLinePbulic.vue";
import myList from "@/components/realEstate/myList.vue";
import mainFooter from "@/components/realEstate/mainFooter.vue";
import timeSelect from "@/components/realEstate/timeSelect.vue";
import magnify from "@/components/public/magnify.vue";
import { getCityName } from '@/utils/cityList'
import {
  selectNewResidenceDeal,
  selectNewResidenceProvide,
  selectResoldApartmentDeal,
  selectRealFinancial,
  selectLandSupply,
  selectDevelopInvestor,
  selectThermodynamic,
} from "@/api/realEstate/main";

const router=useRouter()
// 初始化数据
const fixedCityCode =   localStorage.getItem("cityCode")
const echarDatan = ref({//新建商品房交易统计
    xAxisData: [],
})
const echarData01 = ref({//新建商品住宅交易统计
    xAxisData: [],
})
const echarData02 = ref({//商品住宅供给统计
    xAxisData: [],
})
const echarData03 = ref({//二手住宅交易统计
    xAxisData: [],
})
const personHouseMiddleListData01 = ref({
  list: [],
		name:['城市','新增个人住房贷款金额(万元)','同比增长率','环比增长率']
});
const personHouseMiddleListData02 = ref({
  list: [],
		name:['城市','供应面积(万m²)','城市','供应面积(万m²)','城市','供应面积(万m²)',]
});
const personHouseMiddleListData03 = ref({
  list: [],
		name:['城市','投资金额(万元)','城市','投资金额(万元)','城市','投资金额(万元)',]
});
const Data01 = ref({
  times:''
})
const Data02 = ref({
  times:''
})
const Data03 = ref({
  times:''
})
const Data04 = ref({
  times:''
})
const Data05 = ref({
  times:''
})
const Data06 = ref({
  times:''
})
const Datan = ref({
  times:''
})
const realEstateMiddleData = ref({//地图
  regions: [[]],
});
const cityObj = ref({
  cityName: "",
  cityCode: "",
});
const tab_index = ref(1)//图一tab
const magnifyEchartData = ref(null)//放大框
//新建商品住宅交易统计
const getEcharData01 = async() => {
  let { data } = await selectNewResidenceDeal({ cityCode: cityObj.value.cityCode,startMonth:Data01.value.times,residenceDealType:2});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
      show: true,
      icon:'rect',
      left: 190,
      top: 6,
      itemWidth: 18,
      itemHeight: 10,
      itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "3%",
    top: "32%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "均价(元)",
        type: "1",
      },
      {
        name: "价格指数",
        type: "2",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#55BBEB",
        b: "#074083",
      },
      {
        a: "#F0C44B",
        b: "#E38319",
      },
            {
        a: "#E55151",
        b: "#E55151",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData01.value = paramsData
}
//新建商品房交易统计
const getEcharDatan = async() => {
  let { data } = await selectNewResidenceDeal({ cityCode: cityObj.value.cityCode,startMonth:Datan.value.times,residenceDealType:1});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
      show: true,
      icon:'rect',
      left: 190,
      top: 6,
      itemWidth: 18,
      itemHeight: 10,
      itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "3%",
    top: "32%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "均价(元)",
        type: "1",
      },
      {
        name: "价格指数",
        type: "2",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#55BBEB",
        b: "#074083",
      },
      {
        a: "#F0C44B",
        b: "#E38319",
      },
            {
        a: "#E55151",
        b: "#E55151",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarDatan.value = paramsData
}
//商品住宅供给统计
const getEcharData02 = async() => {
  let { data } = await selectNewResidenceProvide({ cityCode: cityObj.value.cityCode,startMonth:Data02.value.times});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show: true,
    icon:'rect',
    left: 190,
    top: 6,
    itemWidth: 18,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "8%",
    bottom: "3%",
    top: "32%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "库存(套)",
        type: "1",
      },
      {
        name: "平均去化周期",
        type: "2",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#F0C34B",
        b: "#8A670A",
      },
      {
        a: "#4F73E7",
        b: "#183FB9",
      },
            {
        a: "#E55151",
        b: "#E55151",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData02.value = paramsData
}
//二手住宅交易统计
const getEcharData03 = async() => {
  let { data } = await selectResoldApartmentDeal({ cityCode: cityObj.value.cityCode,startMonth:Data03.value.times});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show: true,
    icon:'rect',
    left: 190,
    top: 6,
    itemWidth: 18,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "3%",
    top: "32%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "均价(元)",
        type: "1",
      },
      {
        name: "价格指数",
        type: "2",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#24E1E7",
        b: "#086063",
      },
      {
        a: "#E47D7D",
        b: "#CC3E3E",
      },
            {
        a: "#E55151",
        b: "#E55151",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData03.value = paramsData
}
//房地产金融统计
const getListData04 = async() => {
			let { data } = await selectRealFinancial({ cityCode: cityObj.value.cityCode,startMonth:Data04.value.times});
      personHouseMiddleListData01.value.list = data;
}
//各地土地供应统计
const getListData05 = async() => {
    let { data } = await selectLandSupply({ cityCode: cityObj.value.cityCode,year:Data05.value.times});
    personHouseMiddleListData02.value.list = data;
}
//各地开发建设投资额统计
const getListData06 = async() => {
    let { data } = await selectDevelopInvestor({ cityCode: cityObj.value.cityCode,startMonth:Data06.value.times[0],endMonth:Data06.value.times[1]});
    personHouseMiddleListData03.value.list = data;
}
//合并柱状折线图数据
const getLineBarArr = (policy: Array<number>,resul: Array<number>): Array<any>=>{
  let type = []
  for(let i = 0 ; i< policy.length;i++){
  type.push(1)
  }
  for(let i = 0 ; i < resul.length;i++){
    type.push(2);
    policy.push(resul[i]);
  }
  return[policy,type]

} 
// 初始化时间
const defaultTime = () => {
  let t = new Date()
  let tYear = t.getFullYear()
  let tMonth1 = t.getMonth()+1
  let tMonth2 = t.getMonth()
  let tArr = []
  if(tMonth1 < 10){
    tMonth1 = '0' + tMonth1
  }
  if(tMonth2 < 10){
    tMonth2 = '0' + tMonth2
  }
  Data01.value.times = `${tYear}-${tMonth1}`
  Datan.value.times = `${tYear}-${tMonth1}`
  Data02.value.times = `${tYear}-${tMonth1}`
  Data03.value.times = `${tYear}-${tMonth1}`
  Data04.value.times = `${tYear}-${tMonth1}`
  Data05.value.times = `${tYear}`
  Data06.value.times = [`${tYear}-${tMonth2}`,`${tYear}-${tMonth1}`]
}
// 获取时间组件时间
const timeValueChanges = (va) => {
 if(va.type == 1){
  Data01.value.times = va.times
  getEcharData01()
 }else if(va.type == 2) {
  Data02.value.times = va.times
  getEcharData02()
 }else if(va.type == 3) {
  Data03.value.times = va.times
  getEcharData03()
 }else if(va.type == 4) {
  Data04.value.times = va.times
  getListData04()
 }else if(va.type == 5) {
  Data05.value.times = va.times
  getListData05()
 }else if(va.type == 6) {
  Data06.value.times = va.times
  getListData06()
 }
 else if(va.type == 99) {
  Datan.value.times = va.times
  getEcharDatan()
 }
}
// 地图
const realEstateMiddle = async() => {
  let { data } = await selectThermodynamic({ adcode: cityObj.value.cityCode });
  let inventoryRegionDTOS = data.map((item: any) => ({
    name: item.cityName,
    value: [item.houseCount,item.peopleCount],
    code: item.cityCode,
    selected: fixedCityCode == item.cityCode ? true:false,
  }));
  let seriesData = [ inventoryRegionDTOS];
  let paramsData = {
    regions: seriesData,
  };
  realEstateMiddleData.value = paramsData
}
// 获取城市名
const mapNameChange = (e) => {
  if (cityObj.value.cityName == e.cityName) {
    cityObj.value = {
      cityName: "",
      cityCode: "",
    };
    allFun();
  } else {
    cityObj.value = e;
    allFun();
  }
}
// 打开弹框
const dialogData = (val) => {
  magnifyEchartData.value = val
}
//关闭弹框
const closeDialog = (val) => {
  magnifyEchartData.value = null
}
const allFun = () => {
  defaultTime()
  getEcharData01()
	getEcharData02()
	getEcharData03()
	getListData04()
  getListData05()
  getListData06()
  getEcharDatan()
	realEstateMiddle()
}
// 图一切换卡片
const tabIndex = (i) => {
	tab_index.value = i;
  getEcharData01()
}
// 跳转
const go = (id) => {
  switch (id) {
    case 1:
      router.push('/comHousedealOne');
      break;
    case 2:
      router.push('/HousingSupply');
      break;
    case 3:
      router.push('/comHousedealTwo');
      break;
    case 4:
      router.push('/finance');
      break;
    case 5:
      router.push('/propertyAlertResale');
      break;
    case 6:
      router.push('/LandsupplyAlert');
      break;
    case 7:
      router.push('/Platform');
      break;
  }
}
allFun();
onMounted(() => {
  cityObj.value = getCityName(fixedCityCode)
});
</script>
<style lang="less" scoped>
.mRight8{
	margin-right: 8px;
}
.page-box{
 width: 100vw;
 height: 100vh;
 background-image: url('../../../assets/img/realEstate/pageBg.png');
 background-size: 100% 100%;
 background-repeat: no-repeat;
 overflow: hidden;
 .page-title{
  width: 100vw;
  height: 85px;
  margin-bottom: 26px;
  background-image: url('../../../assets/img/realEstate/main/headBg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
 }
 .page-main{
  width: 100vw;
  height: calc(100vh - 111px);
  display: grid;
  grid-template-columns: repeat(3, 600px);
  grid-template-rows: repeat(3, 300px);
  grid-gap: 20px 10px;
  place-content: start center;
  box-sizing: border-box;
		.page-main-map{
      grid-column: 2 / 2;
      grid-row: 1 / 3;
						padding-top: 100px;
						.mapBox{
								width: 621px;
								height: 400px;
						}
		}
		.page-main-small{
    .page-grid{
    width: 100%;
    .page-grid-title{
     height: 34px;
     width: 100%;
     margin-bottom: 3px;
     img{
      width: 100%;
      height: 100%;
     }
    }
    .page-grid-ec{
     background: rgba(27,126,242,0.1);
     border-radius: 0px 0px 0px 0px;
     border: 1px solid rgba(27,126,242,0.4);
     .time-pic{
				width: 100%;
        height: 31px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 8px;
        .time-title{
          color:#7A8594;
          font-size: 14px;
          padding-left: 20px;
        }
      .time-com{
       padding-left: 15px;
       height: 20px;
       background: rgba(27,126,242,0.2);
       border-radius: 0px 0px 0px 0px;
       border: 1px solid rgba(41,240,250,0.6);
       font-weight: 400;
       font-size: 12px;
       color: #FFFFFF;
       letter-spacing: 1px;
       text-align: right;
			 width:100px;
       position: absolute;
       right: 5px;
       top: 6px;
       z-index: 2;
        img{
          width: 9px;
          height: 6px;
          position: relative;
          bottom: 2px;
          margin-right: 4px;
        }
      }
      .time-coms{
        width:160px;
      }
      .time-com:hover{
        // cursor: pointer;
      }
     }
    }
   }
  }
		.page-footer{
						grid-column: 1 / 4;
            grid-row: 3 / 3;
						display: flex;
						justify-content: space-between;
						.page-main-small{
							width: 33%;
							
						}

		}
	}
}
.time-five{
  margin-right: 15px
}
.map-address {
  position: absolute;
  top: 0px;
  left: 0px;
  letter-spacing: 1px;
  text-shadow: 0px 1px 2px #c1731c;
  font-size: 18px;
  color: #60f9f4;
  letter-spacing: 1.2px;
  margin-left: 27px;
}

.map-address::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -27px;
  width: 20px;
  height: 20px;
  background: url("@/assets/img/personInfor/map-address.png");
  background-size: 100% 100%;
}
.charH{
    height: 253px;
}
/deep/ .el-date-editor.el-input{
  width: 120px ;
  height: 25px;
  position: absolute;
  top: 0px;
  right:0px;
	z-index:1;
}
/deep/ .el-date-editor.el-input:hover{
  cursor: pointer !important;
}
/deep/ .el-range-editor.el-input__wrapper{
  width: 150px ;
  height: 16px;
  position: absolute;
  top: 0px;
  right:0px;
}
.timeHover:hover{
  cursor: pointer;
}
.time-com:hover{
        cursor: pointer;
}
.go{
  position: absolute;
  right:25px;
  top:7px;
  color:#169BD5;
  font-size:14px;
}
.go:hover{
  cursor: pointer;
}
</style>